<template>
  <div class="mui-numbox"
       data-numbox-min="1">
    <button class="mui-btn mui-btn-numbox-minus"
            type="button"
            disabled="">-</button>
    <input id="test"
           class="mui-input-numbox"
           type="number"
           :value="initcount"
           readonly
           @change="countChange">
    <button class="mui-btn mui-btn-numbox-plus"
            type="button">+</button>
  </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js';
export default {
  data() {
    return {

    }
  },
  mounted() {
    mui('.mui-numbox').numbox();
  },
  methods: {
    countChange(e) {
      this.$store.commit('updateGoods', { id: this.id, count: e.target.value })
    }
  },
  props: ['initcount', 'id']
}
</script>

<style lang="scss" scoped>
.mui-numbox {
  height: 25px;
}
</style>